<template>
  <el-dialog
    title="更新推荐内容"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body>
    <div class="mod-config" v-loading="dataListLoading">
      <el-divider>[{{typeName}}-推荐内容管理-{{recommendName}}]</el-divider>
      <p style="text-align: center; margin: 20px 0 20px">[我在人间贩卖黄昏,只为收集世间温柔去见你]</p>
      <div style="text-align: center">
        <el-transfer
          style="text-align: left; display: inline-block"
          v-model="selectedData"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :titles="['所有数据', '已选数据']"
          :button-texts="['到左边', '到右边']"
          :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
          @change="handleChange"
          :data="tableData">
          <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
          <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
          <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
        </el-transfer>
        <div class="modal-footer text-center">
          <el-button type="primary" @click="updateHandler()">确 定</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'recommend-product-update',
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 6; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 3 === 0
          });
        }
        return data;
      };
      return {
        visible: false,
        typeName: '',
        recommendName: '',
        recommenInfo: null,
        tableData: generateData(),
        selectedData: [],
        //真实数据：
        dataList: [],
        pageIndex: 1,
        pageSize: 1000,
        totalPage: 0,
        dataListLoading: false,
      };
    },
    activated () {

    },

    methods: {
      init (id) {
        console.log("recommend-product-update:" + id)
        this.visible = true
        this.$nextTick(() => {
          if (id) {
            this.$http({
              url: this.$http.adornUrl(`/sys/recommend/info/${id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.recommendInfo = data.recommend
                this.recommendName = data.recommend.name
                let url = '/sys/recommend-product/themeList'
                if (this.recommendInfo.type === 1){
                  this.typeName = "主题"
                  url = '/sys/recommend-product/themeList'
                }
                if (this.recommendInfo.type === 2){
                  this.typeName = "组件"
                  url = '/sys/recommend-product/widgeList'
                }
                if (this.recommendInfo.type === 3){
                  this.typeName = "壁纸"
                  url = '/sys/recommend-product/wallpaperList'
                }
                this.getDataList(url)
                this.getSelectedDataList(id)
              }
            })
          }
        })
      },
      // 获取主题数据列表
      getDataList (url) {
        debugger
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize
          })
        }).then(({data}) => {
          debugger
          if (data && data.code === 0) {
            this.dataList = data.page.list
            const newData = [];
            this.dataList.forEach((item)=>{
              newData.push({
                key: item.id,
                label: item.name,
                disabled: false
              });
            });
            this.tableData = newData
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      // 获取主题数据列表
      getSelectedDataList (id) {
        this.$http({
          url: this.$http.adornUrl('/sys/recommend-product/selectedList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'recommendId': id,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            const dataListTemp = data.page.list
            const selectedDataTemp = [];
            dataListTemp.forEach((item)=>{
              selectedDataTemp.push(item.objectId);
            });
            this.selectedData = selectedDataTemp
          }
        })
      },
      handleChange(value, direction, movedKeys) {
        console.log("method:handleChange;");
        console.log(value, direction, movedKeys);
      },
      updateHandler() {
        console.log("method:updateHandler;");
        this.$confirm(`确定要修改操作吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/recommend-product/update'),
            method: 'post',
            data: this.$http.adornData(this.selectedData, false),
            params: this.$http.adornParams({
              'type': this.recommendInfo.type,
              'recommendId': this.recommendInfo.id,
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                  // this.getDataList()
                  // this.getSelectedDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
    }
  };
</script>

<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  .el-transfer-panel{
    width:350px!important;
    height:500px!important;
  }
  .el-transfer-panel__list.is-filterable{
    height: 400px;
  }
</style>
